<template>
  <div class="bg-white rounded-lg shadow-sm p-6 mb-6 resume-section relative">
    <div class="flex justify-between items-start mb-6">
      <h2 class="text-xl font-semibold text-gray-800">项目经验</h2>
      <button v-if="!editMode" class="edit-btn p-2 rounded-full hover:bg-gray-100 opacity-0 group-hover:opacity-100">
        <i class="ri-pencil-line text-gray-500"></i>
      </button>
    </div>
    
    <div class="space-y-6">
      <div v-for="(project, index) in projectList" :key="index" class="p-4 border border-gray-100 rounded-lg hover:shadow-md hover:border-primary/10 transition-all duration-300">
        <div class="flex justify-between items-start">
          <div>
            <h3 v-if="!editMode" class="font-medium text-gray-800">{{ project.name }}</h3>
            <input v-else v-model="project.name" type="text" class="font-medium text-gray-800 bg-transparent border-b border-gray-300 focus:border-primary outline-none w-full" placeholder="项目名称">
            
            <div v-if="!editMode" class="text-gray-500 mt-1">{{ project.company }}</div>
            <input v-else v-model="project.company" type="text" class="text-gray-500 mt-1 bg-transparent border-b border-gray-300 focus:border-primary outline-none" placeholder="所属公司">
          </div>
          <div v-if="!editMode" class="text-gray-500">{{ project.period }}</div>
          <input v-else v-model="project.period" type="text" class="text-gray-500 bg-transparent border-b border-gray-300 focus:border-primary outline-none" placeholder="项目时间">
        </div>
        
        <div class="mt-3 text-gray-700">
          <p v-if="!editMode" class="mb-2">项目描述：</p>
          <div v-if="!editMode" class="text-gray-600">{{ project.description }}</div>
          <textarea v-else v-model="project.description" class="w-full bg-transparent border border-gray-300 rounded p-2 focus:border-primary outline-none h-20" placeholder="项目描述"></textarea>
          
          <p v-if="!editMode" class="mt-2 mb-1">主要职责与成果：</p>
          <div v-if="!editMode" class="text-gray-600">
            <div v-for="achievement in project.achievements" :key="achievement" class="mb-1">
              • {{ achievement }}
            </div>
          </div>
          <textarea v-else v-model="project.achievementsText" class="w-full bg-transparent border border-gray-300 rounded p-2 focus:border-primary outline-none h-24 mt-2" placeholder="主要职责与成果，每行一个要点"></textarea>
        </div>
      </div>
      
      <button v-if="editMode" @click="addProject" class="w-full py-2 border border-dashed rounded-lg text-gray-500 hover:border-primary hover:text-primary">
        <i class="ri-add-line mr-1"></i>添加项目经验
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  editMode: boolean
}

defineProps<Props>()

const projectList = ref([
  {
    name: '品牌全渠道升级项目',
    company: '优趣汇',
    period: '2022.01 - 2022.06',
    description: '针对品牌认知度不足、渠道传播不一致等问题，主导品牌全渠道升级项目，包括品牌定位重塑、视觉识别系统更新、渠道传播策略优化等。',
    achievements: [
      '主导品牌定位研究，通过用户调研、竞品分析确定新的品牌定位',
      '协调设计团队完成品牌视觉识别系统更新，包括logo、色彩、字体等',
      '制定全渠道传播策略，确保线上线下传播一致性',
      '项目上线后品牌认知度提升40%，用户好感度提升35%'
    ],
    achievementsText: '主导品牌定位研究，通过用户调研、竞品分析确定新的品牌定位\n协调设计团队完成品牌视觉识别系统更新，包括logo、色彩、字体等\n制定全渠道传播策略，确保线上线下传播一致性\n项目上线后品牌认知度提升40%，用户好感度提升35%'
  }
])

const addProject = () => {
  projectList.value.push({
    name: '',
    company: '',
    period: '',
    description: '',
    achievements: [],
    achievementsText: ''
  })
}
</script>
